<template>
    <Page>
        <div class="search">
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="关键字">
                    <el-input v-model="params.searchKey" placeholder="输入支付流水号/客户手机号" size="small"></el-input>
                </el-form-item>
                <el-form-item label="经销商">
                    <el-input v-model="params.mchParam" placeholder="输入经销商ID/名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="dataTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="changeDate"
                        style="width:250px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="searchData">查询</el-button>
                    <el-button type="primary" size="small" @click="resetSearch" plain>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="datalist">
            <div class="table-header"></div>
            <div class="table-list">
                <el-table
                    :data="listData.list"
                    stripe
                    style="width:100%"
                    width="100%"
                    :highlight-current-row="false"
                    size="small"
                    :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                >
                    <el-table-column prop="trxNo" label="支付流水号" align="center"></el-table-column>
                    <el-table-column prop="userInfo" label="客户信息" align="center"></el-table-column>
                    <el-table-column prop="mchName" label="经销商" align="center"></el-table-column>
                    <el-table-column prop="orderAmount" label="实付金额（元）" align="center" width="120"></el-table-column>
                    <el-table-column prop="fee" label="手续费" align="center" width="120"></el-table-column>
                    <el-table-column prop="amount" label="实际到账金额（元）" align="center" width="140"></el-table-column>
                    <el-table-column prop="platProfit" label="平台分账（元）" align="center" width="120"></el-table-column>
                    <el-table-column prop="mchProfit" label="经销商分账（元）" align="center" width="140"></el-table-column>
                    <el-table-column prop="createTime" label="分账时间" align="center" width="150"></el-table-column>
                </el-table>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="params.currPage"
                        :page-size="params.pageSize"
                        :total="listData.totalCount"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </Page>
</template>
<script>
    import Page from "@/components/page/Page";
    export default {
        data(){
            return {
                params:{
                    searchKey:null,     // 流水号/客户手机号
                    mchParam:null,      // 经销商名称
                    dateBegin:null,     // 开始时间
                    dateEnd:null,       // 结束时间
                    currPage:1,
                    pageSize:15,
                },
                listData:{
                    currPage: 0,
                    list: [],
                    pageSize: 0,
                    totalCount: 0,
                    totalPage: 0,
                },
                dataTime:[],
            }
        },
        mounted() {
            this.initData();
        },
        methods:{
            // 初始化数据
            initData(){
                this.$http.get("/api/altmch/altList", {params:this.params}).then(result => {
                    if(result.code == 200){
                        this.listData = result.data;
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            },
            // 日期
            changeDate(e){
                this.dataTime = e;
                const [dateBegin, dateEnd] = e;
                this.params.dateBegin = dateBegin;
                this.params.dateEnd = dateEnd;
            },
            // 执行查询
            searchData(e){
                this.params.currPage = 1;
                this.initData();
            },
            // 重置查询
            resetSearch(e){
                ['searchKey','mchParam','dateBegin','dateEnd'].forEach((item, index) => {
                    this.params[item] = null;
                });
                this.dataTime = [];
                this.searchData();
            },
            // 分页点击
            changePage(e){
                this.params.currPage = e;
                this.initData();
            },
        },
        components:{
            Page,
        }
    }
</script>
<style lang="less" scoped>
    .page{

    }
</style>
